<template>
	<el-dialog :title="$t('designer.setting.childrenTableColumns')" :width="1200" destroy-on-close @closed="$emit('closed')">
		<el-form ref="ruleForm" :model="form" :rules="rules" label-width="100px">
			<sc-form-table v-model="form" :addTemplate="addTemplate" drag-sort placeholder="暂无数据">
				<el-table-column prop="prop" label="字段名称" width="140">
					<template #default="scope">
						<el-input v-model="scope.row.prop" placeholder="字段名称" size="mini"></el-input>
					</template>
				</el-table-column>
				<el-table-column prop="label" label="显示名称" width="140">
					<template #default="scope">
						<el-input v-model="scope.row.label" placeholder="显示名称" size="mini"></el-input>
					</template>
				</el-table-column>
				<el-table-column prop="width" label="列宽(px)" width="100">
					<template #default="scope">
						<el-input v-model="scope.row.width" placeholder="列宽" size="mini"></el-input>
					</template>
				</el-table-column>
				<el-table-column prop="type" label="元素类型" width="150">
					<template #default="scope">
						<el-select v-model="scope.row.type" placeholder="请选择" size="mini">
							<el-option v-for="item in elType" :key="item.value" :label="item.label" :value="item.value"></el-option>
						</el-select>
					</template>
				</el-table-column>
				<el-table-column prop="optional" label="备选值" width="100">
					<template #default="scope">
						<el-input v-model="scope.row.optional" placeholder="多个值有','隔开" size="mini"></el-input>
					</template>
				</el-table-column>
				<el-table-column prop="fixed" label="是否固定" width="100">
					<template #default="scope">
						<el-select v-model="scope.row.fixed" placeholder="请选择" size="mini">
							<el-option v-for="item in fixedDic" :key="item.value" :label="item.label" :value="item.value"></el-option>
						</el-select>
					</template>
				</el-table-column>
				<el-table-column prop="type" label="对齐方式" width="100">
					<template #default="scope">
						<el-select v-model="scope.row.align" placeholder="请选择" size="mini">
							<el-option v-for="item in alignDic" :key="item.value" :label="item.label" :value="item.value"></el-option>
						</el-select>
					</template>
				</el-table-column>
				<el-table-column prop="type" label="格式化">
					<template #default="scope">
						<el-select v-model="scope.row.formatS" placeholder="请选择" size="mini" clearable>
							<el-option-group
								v-for="group in formatSDic"
								:key="group.label"
								:label="group.label">
								<el-option
									v-for="item in group.options"
									:key="item.value"
									:label="item.label"
									:value="item.value">
								</el-option>
							</el-option-group>
						</el-select>
					</template>
				</el-table-column>
				<el-table-column prop="type" label="渲染函数">
					<template #default="scope">
						<el-button type="primary" icon="el-icon-edit" circle @click="setRender(scope.row)" :disabled="scope.row.formatS!='render'"></el-button>
					</template>
				</el-table-column>
			</sc-form-table>
		</el-form>
		<div style="width: 100%;text-align: right;margin-top: 20px">
			<el-button @click="$emit('closed')">
				{{ $t('designer.hint.cancel') }}
			</el-button>
			<el-button type="primary" :loading="isSaveing" @click="submitForm">保存</el-button>
		</div>
		<div v-if="showRenderDialog" class="" v-drag="['.drag-dialog.el-dialog', '.drag-dialog .el-dialog__header']">
			<el-dialog :title="$t('designer.setting.tableRender')" v-model="showRenderDialog"
					   :show-close="true" custom-class="drag-dialog small-padding-dialog"
					   :close-on-click-modal="false" :close-on-press-escape="false" :destroy-on-close="true">
				<sc-code-editor ref="editor" v-model="currentRow.render" mode="javascript" theme="darcula" :height="200"></sc-code-editor>
				<template #footer>
					<div class="dialog-footer">
						<el-button @click="showRenderDialog = false">
							{{ $t('designer.hint.cancel') }}
						</el-button>
						<el-button type="primary" @click="saveRender">
							{{ $t('designer.hint.confirm') }}
						</el-button>
					</div>
				</template>
			</el-dialog>
		</div>
	</el-dialog>
</template>

<script>
import {defineAsyncComponent} from 'vue';

const scCodeEditor = defineAsyncComponent(() => import('@/components/scCodeEditor'));
export default {
	name: 'children-data-table',
	isSaveing: false,
	components: {
		scCodeEditor
	},
	props: {
		childrenTableColumns: Object
	},
	data() {
		return {
			showRenderDialog: false,
			addTemplate: {
				prop: '',
				label: '',
				width: "100",
				align: "left",
				optional:"",
				fixed: "left",
				type: 'input',
				formatS: "",
				render: ""
			},
			currentRow: {},
			form: this.childrenTableColumns,
			elType: [
				{
					value: "input",
					label: "单行输入框"
				},
				{
					value: "textarea",
					label: "多行输入框"
				},
				{
					value: "number",
					label: "数值"
				},
				{
					value: "date",
					label: "日期选择"
				},
				{
					value: "daterange",
					label: "日期范围选择"
				},
				{
					value: "time",
					label: "时间选择"
				},
				{
					value: "select",
					label: "下拉选择"
				},
				{
					value: "radio",
					label: "单选"
				},
				{
					value: "checkbox",
					label: "复选"
				}
			],
			fixedDic: [
				{
					label: "false",
					value: "false"
				},
				{
					label: "left",
					value: "left"
				},
				{
					label: "right",
					value: "right"
				}
			],
			alignDic: [
				{
					label: "center",
					value: "center"
				},
				{
					label: "left",
					value: "left"
				},
				{
					label: "right",
					value: "right"
				}
			],
			formatSDic: [
				{
					label: '自定义渲染',
					options: [
						{
							label: '请选择',
							value:""
						},
						{
						value: 'render',
						label: 'render'
					}]
				}, {
					label: '日期格式化',
					options: [{
						value: 'YYYY-MM-DD',
						label: 'YYYY-MM-DD'
					}, {
						value: 'YYYY/MM/DD',
						label: 'YYYY/MM/DD'
					}, {
						value: 'YYYY年MM月DD日',
						label: 'YYYY年MM月DD日'
					}, {
						value: 'YYYY-MM-DD HH:mm:ss',
						label: 'YYYY-MM-DD HH:mm:ss'
					}, {
						value: 'YYYY-MM-DD hh:mm:ss',
						label: 'YYYY-MM-DD hh:mm:ss'
					},{
						value: 'HH:mm:ss',
						label: 'HH:mm:ss'
					}, {
						value: 'hh:mm:ss',
						label: 'hh:mm:ss'
					},{
						value: 'HH时mm分',
						label: 'HH时mm分'
					},{
						value: 'hh时mm分',
						label: 'hh时mm分'
					},{
						value: 'HH时mm分ss秒',
						label: 'HH时mm分ss秒'
					},{
						value: 'HH时mm分ss秒',
						label: 'HH时mm分ss秒'
					}]
				},
				{
					label: '数字格式',
					options: [{
						value: '###,###,###,##0.######',
						label: '###,###,###,##0.######'
					},
						{
							value: '###,###,###,##0.00####',
							label: '###,###,###,##0.00####'
						},
						{
							value: '###,###,###,##0.000000',
							label: '###,###,###,##0.000000'
						},
						{
							value: '###,###,###,##0.000',
							label: '###,###,###,##0.000'
						},
						{
							value: '###,###,###,##0.00',
							label: '###,###,###,##0.00'
						},
						{
							value: '###,###,###,##0',
							label: '###,###,###,##0'
						},
						{
							value: '###,##0.00##%',
							label: '###,##0.00##%'
						}
					]
				}
			],
			rules: {}
		}
	},
	watch: {
		'childrenTableColumns': {
			handler(val) {
				console.log(val);
				if (val) {
					console.log(val);
					this.form = val
				}
			}
		},
	},
	methods: {
		submitForm() {
			this.$refs.ruleForm.validate((valid) => {
				if (valid) {
					this.$emit('success', this.form)
					this.$message.success("操作成功")
				} else {
					return false;
				}
			})
		},
		resetForm() {
			this.$refs.ruleForm.resetFields();
		},
		setRender(row) {
			this.currentRow = row;
			this.showRenderDialog = true;
		},
		saveRender() {
			var v = this.$refs.editor.coder.getValue()
			this.currentRow.render = v;
			this.showRenderDialog = false;
		}
	}
}
</script>
